<template>
<<<<<<< HEAD
	<div class="tab-page page"
		:style="{overflow: cardSelected !== -1 ? 'hidden' : 'auto'}"
		@touchmove="touchMove"
=======
	<div 
		class="tab-page page"
		:style="{
			paddingTop: pagePaddingTop
		}"
>>>>>>> dev
		>
		<nav-bar title="发现" left="setting" />
		<filter-button 
			@changeFilter="changeFilter" 
			:first="firstIcons"
			:second="secondIcons"
			:pageSelected="pageSelected"
			:starSelected="starSelected"
			:returnMode="cardSelected !== -1"
			@cancelCard="cancelCard"
			/>
		<div 
			class="content flex-column"
			@touchmove.stop="touchMove"
			:class="{'show-content': loadAnimation}"
			>
			<spot-card
				v-for="(item, index) in selectedList" 
				:key="index" 
<<<<<<< HEAD
				:index="index"
				:info="item"
				:ref="'spotcard'"
				:selected="cardSelected === index"
				@click.native="selectCard(index)"
				:id="'spot-card' + index"
				:class="{'show-spot-card': loadAnimation } "
				:style="{
					zIndex: (cardSelected === index || (lastCardSelected === index)) ? 10 : 4, 
					transform: cardSelected === index ? 'translateY(' + cardY + 'rpx)' : '',
					}"
=======
				:info="item" 
				:class="{'show-spot-card': loadAnimation}"
				@click.native="toSpotDetail(index)"
>>>>>>> dev
				/>
			<div v-if="selectedList.length === 0">
				<van-image 
					src="https://iconfont.alicdn.com/s/5d90bca8-d419-4dd5-84e5-b96c62aa2db8_origin.svg"
					width="400rpx"
					height="400rpx"
					/>
					<div class="not-find">没有找到哦</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex'
export default {
	computed: mapState({
    pageSelected: state => state.indexPageSelected,
		starSelected: state => state.indexStarSelected,
		cardSelected: state => state.indexCardSelected
  }),
	data() {
		return {
			cardY: 0,
			addZIndex: false,
			lastCardSelected: -1,
			tabIndex: 0,
			show: true,
			selectedList: [],
			lastPageSelected: undefined,
			lastStarSelected: undefined,
			firstIcons: [
				{
					icon: "smile-o",
					text: "美食",
				},
				{
					icon: "shop-collect-o",
					text: "美景",
				},
				{
					icon: "medal-o",
					text: "学习",
				},
				{
					icon: "bookmark-o",
					text: "运动",
				}
			],
			pageList: [
				[{
						title: "美食1",
						src: "https://picsum.photos/seed/sea/600/800",
						score: 1.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "美食2",
						src: "https://picsum.photos/seed/sky/500/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "美食3",
						src: "https://picsum.photos/seed/yo/700/800",
						score: 3.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "美食4",
						src: "https://picsum.photos/seed/sea/600/800",
						score: 4.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "美食5",
						src: "https://picsum.photos/seed/sky/500/800",
						score: 5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "美食6",
						src: "https://picsum.photos/seed/yo/700/800",
						score: 4.2,
						distance: "1.3KM NEARBY"
					},
				],
				[{
						type: 'spot',
						id: 1,
						title: "美景1",
						src: "https://picsum.photos/seed/food1/500/800",
						score: 3.5,
						distance: "1.3KM NEARBY"
					},
					{
						type: 'spot',
						id: 2,
						title: "美景2",
						src: "https://picsum.photos/seed/food2/600/800",
						score: 3.5,
						distance: "1.3KM NEARBY"
					},
					{
						type: 'spot',
						id: 3,
						title: "美景3",
						src: "https://picsum.photos/seed/food3/700/800",
						score: 3.5,
						distance: "1.3KM NEARBY"
					}
				],
				[{
						title: "学习",
						src: "https://picsum.photos/seed/book1/400/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "学习",
						src: "https://picsum.photos/seed/book2/500/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "学习",
						src: "https://picsum.photos/seed/book3/600/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "学习",
						src: "https://picsum.photos/seed/book4/700/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "学习",
						src: "https://picsum.photos/seed/book5/800/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
				],
				[{
						title: "运动",
						src: "https://picsum.photos/seed/sports1/400/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "运动",
						src: "https://picsum.photos/seed/sports2/500/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "运动",
						src: "https://picsum.photos/seed/sports3/600/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "运动",
						src: "https://picsum.photos/seed/sports4/700/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
					{
						title: "运动",
						src: "https://picsum.photos/seed/sports5/800/800",
						score: 2.5,
						distance: "1.3KM NEARBY"
					},
				],
			],
			loadAnimation: true,
		}
	},
	methods: {
		...mapMutations(['changeIndexCardSelected']),
		changeFilter: function(event) {
			const data = event.detail.__args__
			const confirm = data[0]
			this.loadAnimation = false
			if (confirm
				&& (this.pageSelected !== this.lastPageSelected 
				|| this.starSelected !== this.lastStarSelected)) {
				this.loadAnimation = true
				uni.pageScrollTo({
					scrollTop: 0,
					selector: '.content',
					duration: 0
				});
				this.changePageList()
			}
		},
		changePageList() {
			this.selectedList = this.pageList[this.pageSelected].filter((item, index) => {
				this.lastPageSelected = this.pageSelected
				this.lastStarSelected = this.starSelected
				return item.score >= this.starSelected + 1
			})
		},
<<<<<<< HEAD
		selectCard(index) {
			if (this.cardSelected === -1) {
				this.changeIndexCardSelected(index)
				this.lastCardSelected = index
				this.addZIndex = true
				const query = uni.createSelectorQuery()
				query.select(`#spot-card${index}`).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					console.log(res)
					console.log(res[0].top)
					const cardY = (66 - res[0].top) * 2
					console.log(cardY)
					this.cardY = cardY
 				})
			}
		},
		cancelCard() {
			this.changeIndexCardSelected(-1)
			setTimeout(() => {
				this.lastCardSelected = -1
			}, 600)
		},
		touchMove(event) {
			console.log("out")
=======
		toSpotDetail(index) {
			const spot = this.selectedList[index]
			uni.navigateTo({
				url: `/pages/spot-detail?option=${encodeURIComponent(JSON.stringify(spot))}`
			})
>>>>>>> dev
		}
	},
	created() {
		this.changePageList()
	}
}
</script>

<style lang="less" scoped>
@card-width: 670rpx;
@card-height: 480rpx;
@content-z-index: 2;
@spot-card-z-index: 3;
@overlay-z-index: 4;
.page {
	filter-button {
		pointer-events: none;
	}
	.content {
		width: 100%;
		min-height: calc(100vh - 300rpx);
		position: relative;
		z-index: @content-z-index;
		padding-bottom: 70rpx;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: blur(4px);
			background-image: url("");
		}
		spot-card {
			margin: 20rpx 0;
			width: @card-width;
			height: @card-height;
			z-index: @spot-card-z-index;
			position: relative;
			font-size: 0;
			transition: .5s ease-in-out;
			transform-origin: 50% 0;
		}
		.show-spot-card {
			animation: 1.5s ease-out 0s post-card-animation;
		}
		.not-find {
			position: relative;
			text-align: center;
		}
		.selected-card {
		}
	}
	.show-content {
		animation: 1s ease-out 0s content-animation;
	}
	@keyframes content-animation {
		from {
			padding-top: 1500rpx;
		}
		to {
			padding-top: 0rpx;
		}
	}
	@keyframes post-card-animation {
		from {
			margin: 150rpx 0;
		}
		to {
			margin: 20rpx 0;
		}
	}
}
</style>
